﻿
<script src="~/lib/vue/dist/vue.global.js"></script>
<script src="~/lib/axios/dist/axios.js"></script>
<link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/dist/index.full.js"></script>
<title>登录</title>
<div id="app">
    <table cellspacing=0 cellpadding=0 width=900 align=center border=0>
        <tbody>
            <tr>
                <td style="height: 105px">
                    <img src="~/images/login_11.gif" border=0>
                </td>
            </tr>
            <tr>
                <td background=@Url.Content("~/images/login_22.jpg") height=300>
                    <table height=300 cellpadding=0 width=900 border=0>
                        <tbody>
                            <tr>
                                <td colspan=2 height=35></td>
                            </tr>
                            <tr>
                                <td width=360></td>
                                <td>
                                    <table cellspacing=0 cellpadding=2 border=0>
                                        <el-form :rules="rules" ref="form" :model="from" label-width="80px">
                                            <el-form-item label="用户名:" prop="name">
                                                <el-input v-model="from.name" style="width: 200px;"></el-input>
                                            </el-form-item>
                                            <el-form-item label=" 密 码: " prop="pwd">
                                                <el-input v-model="from.pwd" style="width: 200px;" type="password"></el-input>
                                            </el-form-item>
                                            <el-form-item>
                                                <el-button type="primary" v-on:click="onSubmit" class="card-with-background3">登录</el-button>
                                            </el-form-item>
                                        </el-form>
                                    </table>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <img src="@Url.Content("~/images/login_33.jpg")" border=0>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    var { createApp, reactive, ref } = Vue
    var app = createApp({
        setup() {
            let from = reactive({
                name: "",
                pwd: ""
            })
            function onSubmit() {
                axios.defaults.headers["Content-Type"] = "application/x-www-form-urlencoded";
                axios.post('/GetUser', {
                    UName: from.name,
                    UPassWord: from.pwd,
                }).then(function (response) {
                    if (response.data != null) {
                        sessionStorage.setItem('User', JSON.stringify(response.data));
                        window.location.href = "/Home/Index";
                    } else {
                        open();
                    }

                })

            }
            function open() {
                ElementPlus.ElNotification({
                    title: '消息提示',
                    type: 'error',
                    dangerouslyUseHTMLString: true,
                    message: '<hr/>登录密码格式不正确！',
                    position: 'bottom-right'
                })
            }
            const rules = {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    // 其他验证规则...
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    // 其他验证规则...
                ]
                // 其他字段的验证规则...
            };
            return {
                rules,
                from,
                onSubmit
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app")
</script>
<style>
    .card-with-background {
        background-image: url('/images/2.png');
        height: 500; /* 或者你需要的任何高度 */
        border: 1px solid white;
        margin: 0px 402px 0px 402px;
    }

    .card-with-background2 {
        margin: 200px 300px 100px 350px;
    }

    .card-with-background3 {
        margin: 0px 0px 0px 140px;
    }
</style>


<head>
    <script src="~/lib/vue/dist/vue.global.js"></script>
    <link href="~/lib/element-plus/dist/index.css" rel="stylesheet" />
    <script src="~/lib/element-plus/dist/index.full.js"></script>
    <title>欢迎使用 Bette 伯乐人力资源管理系统</title>
</head>
<div id="app">
    <div class="common-layout" style="font-family: 'Microsoft YaHei';">
        <el-container>
            <el-header class="head" style="font-family: 'Microsoft YaHei';">
                <el-row :gutter="20" style="display: flex; align-items: center; justify-content: center;">
                    <el-col :span="4"></el-col>
                    <el-col :span="16" class="container" style="font-family: 'Microsoft YaHei'; font-size: 36px; color: white; text-align: center;text-shadow: 4px 4px 15px black;">人力资源管理系统</el-col>
                    <el-col :span="4" class="container" style="padding-top: 20px;font-family: 'Microsoft YaHei'; display: flex; align-items: center; justify-content: space-between;font-size:18px">
                        <div>欢迎您：{{name}}</div>
                        <el-button plain v-on:click="Quit" style="height:20px;width:60px;font-size:12px">
                            退出系统
                        </el-button>
                    </el-col>
                </el-row>
            </el-header>
            <el-container>
                <el-aside class="menu_aside" style="width: 15%; font-family: 'Microsoft YaHei';">
                    @Html.Partial("~/Views/Menu/Index.cshtml")
                </el-aside>

                <el-main class="custom-main" width="100%" height="100%">
                    <iframe :src="iframeView" style="width:100%;height:100%" frameborder="0" scrolling="no"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>
</div>

<script>
    var { createApp, reactive, ref } = Vue
    var app = createApp({
        setup() {
            const name = ref("");
            const iframeView = ref("/Home/bj"); // 设置 iframe 的默认 src

            const Quit = () => {
                location.replace("/User/Index");
            };

            const setSelectedView = (viewPath) => {
                iframeView.value = viewPath;
            };

            const fetchData = () => {
                // 获取存储的res.data值
                const responseDataString = sessionStorage.getItem('User');
                if (responseDataString) {

                    // 将存储的字符串转换回数组
                    const responseDataArray = JSON.parse(responseDataString);

                    // 现在您可以访问responseDataArray数组中的元素
                    name.value = responseDataArray.uName;
                } else {
                    console.log("未找到存储的值");
                }
            };
            function open() {
                ElementPlus.ElNotification({
                    title: '消息提示',
                    type: 'info',
                    dangerouslyUseHTMLString: true,
                    message: '<hr/>欢迎你：' + name.value,
                    position: 'bottom-right'
                })
            }
            open();
            fetchData();
            return {
                Quit,
                name,
                setSelectedView,
                iframeView
            }
        }
    })
    app.use(ElementPlus)
    app.mount("#app");
</script>

<style scoped>
    .common-layout {
        display: flex;
        flex-direction: column;
        height: 98vh;
    }

    .head {
        height: 70px;
        background-color: #FFD553;
        background-size: cover;
    }

    .header-content {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .el-main {
        padding: 0px;
    }

    .menu_aside {
    }

    .custom-main {
        height: calc(98vh - 70px);
    }

    .menu_aside {
        background-color: #545c64;
        height: calc(98vh - 70px);
        background-color: #FFFFCC;
    }

    .your-container {
        position: relative;
    }

    .image-in-right-corner {
        position: absolute;
        top: -20px;
        right: -20px;
    }

    * {
        margin: 0px;
        padding: 0px;
        border: 0px;
    }
</style>

